"use client"

import { useEffect, useState, useRef } from "react"
import { Swiper, SwiperSlide } from "swiper/react"
import { Autoplay } from "swiper/modules"
import type { Swiper as SwiperType } from "swiper"
import "swiper/css"

export default function Banner() {
  const [mounted, setMounted] = useState(false)
  const swiperRef = useRef<SwiperType | null>(null)

  const items = [
    { id: 1, title: "Item 1" },
    { id: 2, title: "Item 2" },
    { id: 3, title: "Item 3" },
    { id: 4, title: "Item 4" },
    { id: 5, title: "Item 5" },
    { id: 6, title: "Item 6" },
    { id: 7, title: "Item 7" },
    { id: 8, title: "Item 8" },
    { id: 9, title: "Item 9" },
    { id: 10, title: "Item 10" },
    { id: 11, title: "Item 11" },
    { id: 12, title: "Item 12" },
    { id: 13, title: "Item 13" },
    { id: 14, title: "Item 14" },
    { id: 15, title: "Item 15" }
  ]

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <div className="h-screen flex items-center justify-center">Loading...</div>
  }

  return (
    <div className="w-full bg-[#f0f0ff] flex items-center justify-center py-10">
      <Swiper
        onSwiper={(swiper) => {
          swiperRef.current = swiper
        }}
        grabCursor={true}
        centeredSlides={true}
        slidesPerView="auto"
        spaceBetween={20}
        loop={true}
        autoplay={{
          delay: 3000,
          disableOnInteraction: false,
        }}
        modules={[Autoplay]}
        className="w-full"
      >
        {items.map((item) => (
          <SwiperSlide
            key={item.id}
            className="!w-[169px] !h-[300px] bg-gray-400 rounded-lg flex items-center justify-center text-white text-xl font-medium transition-all duration-300"
          >
            {item.title}
          </SwiperSlide>
        ))}
      </Swiper>

      <style jsx global>{`
        .swiper {
          padding: 0;
          width: 100%;
          overflow: visible !important;
          display: flex;
          align-items: center;
        }
        
        .swiper-wrapper {
          align-items: center;
        }
        
        .swiper-slide {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .swiper-slide-active {
          width: 200px !important;
          height: 340px !important;
          z-index: 2;
          transform: translateY(0);
        }
      `}</style>
    </div>
  )
}
